<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-arrow
      @click-left="$router.go (-1)"
    />
      <van-index-bar sticky :index-list="indexList">
      <van-index-anchor index="#">当前城市</van-index-anchor>
      <van-cell :title="上海" />
      <van-index-anchor index="热">热门城市</van-index-anchor>
      <van-cell
        v-for="item in hotCity"
        :key="item.pinyin"
        :title="item.label"
      />

      <div v-for="(item, index) in arr" :key="index">
        <div v-if="item.length">
          <van-index-anchor :index="list[index]">{{list[index]}}</van-index-anchor>
          <van-cell
            v-for="(item2, index2) in item"
            :key="index2"
            :title="item2.label"
          />
        </div>
        <div v-else>
          <van-index-anchor :index="list[index]"
            >{{ list[index] }} </van-index-anchor
          ><van-cell title="暂无城市" />
        </div>
      </div>
    </van-index-bar>
    </div>

</template>

<script>
import { cityList, cityListH } from '@/api/article'
export default {
  async created () {
    const { body } = await cityListH()
    console.log(body)
    this.hotCity = body
    const res2 = await cityList()
    console.log(res2)
    // this.hotCity = res2
    for (let i = 0; i <= this.list.length - 1; i++) {
      this.arr.push(
        res2.body.filter((item) => {
          return item.short[0].toUpperCase() === this.list[i]
        })
      )
    }
  },
  data () {
    return {
      hotCity: [],
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      list: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      arr: []
    }
  }
  // methods: {
  //   onClickLeft () {
  //     this.$router.back()
  //   },
  //   hotcityfn (city) {
  //     this.$router.push({ path: '/home', query: { city: city } })
  //   }
  // }
}
</script>

<style>
.van-nav-bar{
  height: 40px;
}
.van-index-bar .van-index-anchor {
  font-size: 12px;
  color: gray;
}
.van-cell .van-cell__title span {
  font-size: 16px;
}
.van-index-bar__sidebar {
  height: 600px;
  font-size: 18px;
}
.van-index-bar__sidebar .van-index-bar__index {
  margin: 4px;
}
</style>
